<template>
	<view class="nearby-sku-popup-box">
		<e-popup zIndex="10076" :show="show" mode="center" bgColor="transparent">
			<view>
				<view class="nearby-sku-popup bg-white">
					<view class="e-line-1 e-m-b-4 e-font-32 fw-600">
						{{ goodsName }}
					</view>
					<view class="nearby-sku-scroll">
						<view class="sku-big-box" :style="{ '--backgroundColor': bgColor }">
							<view class="sku-item-box" v-for="(item, index) in list" :key="item.id">
								<view class="tlt">{{ item.name }}</view>

								<view class="item-box e-flex e-flex-wrap">
									<view class="item" :class="{ 'item-act': sitem.isCheck }"
										v-for="(sitem, sindex) in item.productSkuValues" :key="sitem.id"
										@tap="emit('checkSku',index, sindex)">
										{{ sitem.name }}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="e-m-t-46 e-flex e-flex-between">
						<view class="e-flex">
							<text class="e-font-30">{{ $t('cart.总计') }}：</text>
							<text
								class="c-red e-font-36">{{ $unitEn }}{{ accMul(skuInfo.price || 0, skuInfo.goodsNum || 1) }}</text>
						</view>
						<view v-if="!number">
							<button class="bg-primary c-white" @tap="add">+{{ $t('nearby.加入购物车') }}</button>
						</view>
						<view class="e-flex" v-else>
							<text class="iconfont icon-jianshao   e-font-46 c-primary" @tap="sub"></text>
							<view class="c-666 e-m-l-20 e-m-r-20">
								{{ number }}
							</view>
							<text class="iconfont icon-jiahao2fill e-font-46 c-primary" @tap="add"></text>
						</view>
					</view>
				</view>
				<view class="e-flex-xy-center">
					<image src="/static/layout/close.png" class="img-60" @tap="emit('close')"></image>
				</view>
			</view>
		</e-popup>
	</view>
</template>
<script lang="ts">
	export default {
		// #ifdef MP-WEIXIN
		// 将自定义节点设置成虚拟的，更加接近Vue组件的表现，能更好的使用e-flex属性
		options: {
			virtualHost: true
		}
		// #endif
	}
</script>
<script setup lang="ts">
	import { computed } from 'vue'
	import { debounce, accMul } from '@/common/utils'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import type { GoodsSkuSpecificationItem } from '@/common/request/api'

	const ctx = useCurrentInstance()


	const props = withDefaults(defineProps<{
		show : boolean
		list : GoodsSkuSpecificationItem[]
		skuInfo : {}
		goodsName?: string
		bgColor : string
		isCheckSku ?: boolean
	}>(), {
		isCheckSku: true
	})

	const emit = defineEmits(['goodsNumChange', 'addCart', 'priceChange', 'checkSku', 'close'])

	let hasCart = props.skuInfo?.goodsNum > 0
	const numChange = debounce(function (v : number) {

		if (hasCart) {
			emit('goodsNumChange', v)
			if (v === 0) {
				hasCart = false
			}
		} else {
			if (v > 0) {
				hasCart = true
				emit('addCart', v)
			}
		}
	}, 200)
	const number = computed({
		get() {
			return props.skuInfo?.goodsNum || 0
		},
		set(v) {
			numChange(v)
		}
	})

	const add = () => {
		if (props.isCheckSku) {
			number.value++
			emit('priceChange', true)

		} else {
			ctx.$toastApp(ctx.$t('classify.请选择商品规格'))
		}


	}
	const sub = () => {
		number.value--
		emit('priceChange', false)
	}
</script>

<style lang="scss" scoped>
	.nearby-sku-popup-box {

		::v-deep {
			.e-transition {
				z-index: 10076 !important;
			}
		}

		.nearby-sku-popup {
			padding: 26rpx 30rpx 40rpx 30rpx;
			border-radius: 20rpx;
			width: calc(100vw - 80rpx);
			margin-bottom: 60rpx;
			z-index: 100;

			button {
				width: 240rpx;
				height: 64rpx;
				line-height: 64rpx;
				border-radius: 32rpx;
				font-size: 28rpx;
			}

			.nearby-sku-scroll {
				white-space: nowrap;
				max-height: 668rpx;
				overflow-y: auto;

				.sku-big-box {
					width: 100%;

					.sku-item-box {
						margin-top: 36rpx;

						.tlt {
							color: #424242;
							@include fontH(28, 38);
						}

						.item-box {
							// @include flex(start, center, wrap);

							.item {
								height: 56rpx;
								min-width: 120rpx;
								padding: 0 30rpx;
								// color: $color;
								font-size: 28rpx;
								line-height: 52rpx;
								margin-top: 20rpx;
								margin-right: 20rpx;
								text-align: center;
								background: #ededed;
								border-radius: 10rpx;
								border: 2rpx solid #ededed;

								input {
									height: 56rpx;
									width: 120rpx;
									border-radius: 8rpx;
									// color: $color;
									font-size: 28rpx;
									line-height: 56rpx;
								}
							}

							.item-act {
								color: var(--color-primary);
								background: var(--backgroundColor);
								border-color: var(--color-primary);
							}
						}
					}
				}
			}
		}
	}
</style>